<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
    <script src="https://unpkg.com/swiper/js/swiper.js"> </script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <link rel="stylesheet" href="QQ.css" />

</head>

<body>
    <div id="app">
        <header>
            <section class="header_bg">
                <section class="header_tp">
                    <div class="qq_icon"><img src="http://y.gtimg.cn/mediastyle/mod/mobile/img/logo.svg" /></div>
                    <div class="desc">
                        <h2>QQ音乐</h2>
                        <p>打开App收藏下载</p>
                    </div>
                    <div class="down">
                        <a href="#">下载APP</a>
                    </div>
                </section>
                <section class="header_tab">
                    <div class="nav">
                        <a href="">推荐</a>
                        <a href="">排行榜</a>
                    </div>
                </section>
            </section>
        </header>

        <div class="search_bar">
            <div class="search_container">
                <form>
                    <input placeholder="搜索" />
                </form>
            </div>
        </div>

        <div class="body_container">
            <div class="mod">
                <div class="mod_title">
                    <h2>官方歌单
                        <a href="#">更多&gt;</a>
                    </h2>
                </div>
                <div class="mod_carousel">
                    <div class="swiper-container1">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="card in movies">
                                <img :src="card.cover" />
                                <div class="img_desc">{{card.title}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mod">
                <div class="mod_title">
                    <h2>官方歌单
                        <a href="#">更多&gt;</a>
                    </h2>
                </div>
                <div class="mod_carousel">
                    <div class="swiper-container1">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="card in movies">
                                <img :src="card.cover" />
                                <div class="img_desc">粤语|经典留声</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mod">
                <div class="mod_title">
                    <h2>官方歌单
                        <a href="#">更多&gt;</a>
                    </h2>
                </div>
                <div class="mod_carousel">
                    <div class="swiper-container1">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="card in movies">
                                <img :src="card.cover" />
                                <div class="img_desc">粤语|经典留声</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="copyright">
            <div class="copy_icon">
                <img src="http://y.gtimg.cn/mediastyle/mod/mobile/img/logo.svg" />
                <span>QQ音乐</span>
            </div>
            <p class="copyright_txt">Copyright © 1998 - <span>2019</span> Tencent. All Rights Reserved.</p>
            <p class="copyright_txt">联系电话：0755-86013388 QQ群：55209235</p>
        </div>
    </div>

    <footer>
        <div class="footer_icon">
            <div><img src="http://y.gtimg.cn/mediastyle/mod/mobile/img/logo.svg" /></div>
            <div>安装QQ音乐 发现更多精彩</div>
        </div>
    </footer>

    <script src="QQ.js"></script>
</body>

</html>